<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header">
      <div class="el-page-header__left haruyuki-flex-center haruyuki-size-18" @click="goBack" >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content haruyuki-flex-center">
        <el-image
          style="width: 20px; height: 20px"
          src="/img/merchant-icon/auth.png"
          fit="fill"
        ></el-image>
        <span class="haruyuki-ml-6">实名认证</span>
        </div>
    </div>
    <!-- END goBack -->
    <!-- 通道类型 -->
    <div class="activity-solid haruyuki-mt-20">通道类型</div>
    <div class="haruyuki-flex haruyuki-flex-wrap haruyuki-mt-20 haruyuki-mb-20">
      <div :class="['aisle-box-type',activeIndex == index?'active':' ']" v-for="(item, index) in aisleList" :key="index" @click.stop="clickActive(index)">
        <!-- <img class="aisle-type-logo" src="http://saobei.lcsw.cn/lcsw/static/cms/images/icon/fuyou_icon.png" /> -->
        <!-- <img class="aisle-type-logo" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/> -->
        <div class="aisle-type-item">
          <img class="aisle-type-logo" :src="item.aisleLogo"/>
          <div class="aisle-type-right">
            <div class="aisle-type-title">{{item.aisleName}}</div>
            <div>
              <span :class="[item.isAuthName=='未授权'?'status-color-red':'status-color-green']" v-show="item.isAuthName">{{item.isAuthName}}</span>
              <span class="haruyuki-ml-6" :class="[item.isDefaultName=='未使用'?'status-color-red':'status-color-green']" v-show="item.isDefaultName !='未使用'">{{item.isDefaultName}}</span>
            </div>
          </div>
        </div>
        <!-- 支付公司类型 微信支付宝 -->
        <div class="haruyuki-flex haruyuki-flex-wrap">
          <div :class="['pay-type-item',activePay == payItem.custType && activeIndex == index?'pay-active':' ']" v-for="(payItem, i) in item.payList" :key="i" @click.stop="clickPayActive(payItem, index)">
            <el-image class="pay-type-logo" :src="payItem.image" fit="contain"></el-image>
            <span class="haruyuki-ml-6">{{payItem.name}}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 通道认证 -->
    <div class="haruyuki-bg-color-white">
      <div class="el-page-header__content" v-loading="loading">
        <div class="activity-solid">{{ aisleName }}通道{{ payName }}实名认证 
          <!-- <strong v-if="aisleKind == 2"> -->
          <strong>
            <!-- <span @click.stop="wxInfoVisible=true" v-if="aisleData.adminState=='4'">(<span class="cursor-pointer haruyuki-color-subjectblue font-size-16">修改认证信息</span>)</span> -->
            <span  @click.stop="()=>{ contractQrCodeShow = true }">(<span class="cursor-pointer haruyuki-color-subjectblue font-size-16">签约二维码</span>)</span>
          </strong>
        </div>
        <!-- <div v-if="aisleKind == 2"> -->
        <div>
          <div class="passageway_content">
            <div class="passageway_content_left">渠道商户编号：</div>
            <div class="passageway_content_right">{{aisleData.mercId}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.wxMerchantCode">
            <div class="passageway_content_left">渠道微信商户号：</div>
            <div class="passageway_content_right">{{aisleData.wxMerchantCode}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.aliMerchantCode">
            <div class="passageway_content_left">渠道支付宝商户号：</div>
            <div class="passageway_content_right">{{aisleData.aliMerchantCode}}</div>
          </div>
          <div class="passageway_content" v-if="aisleCode=='A0000014'">
            <div class="passageway_content_left">APPID：</div>
            <div class="passageway_content_right">{{aisleData.appid}}</div>
          </div>

          <div class="passageway_content" v-if="aisleCode=='A0000032'||aisleCode=='A0000044'">
            <div class="passageway_content_left">商户APPID：</div>
            <div class="passageway_content_right">{{aisleData.mercAppid}}</div>
          </div>
          <div class="passageway_content" v-if="aisleCode=='A0000032'">
            <div class="passageway_content_left">通道平台商户私钥：</div>
            <div class="passageway_content_right">{{aisleData.mercPrivate}}</div>
          </div>
          <div class="passageway_content" v-if="aisleCode=='A0000032'">
            <div class="passageway_content_left">通道平台商户公钥：</div>
            <div class="passageway_content_right">{{aisleData.mercPublic}}</div>
          </div>
          <div class="passageway_content" v-if="aisleCode=='A0000038'||aisleCode=='A0000044'">
            <div class="passageway_content_left">通道商户签名密钥：</div>
            <div class="passageway_content_right">{{aisleData.mercKey}}</div>
          </div>
          <div class="passageway_content" v-if="aisleCode=='A0000044'">
            <div class="passageway_content_left">通道商户token：</div>
            <div class="passageway_content_right">{{aisleData.mercToken}}</div>
          </div>
          <div class="passageway_content" v-if="aisleCode=='A0000029'">
            <div class="passageway_content_left">合同签约链接：</div>
            <div class="passageway_content_right">{{aisleData.signContractUrl}}</div>
          </div>
          <!-- <div class="passageway_content">
            <div class="passageway_content_left">公司机构号：</div>
            <div class="passageway_content_right">{{aisleData.coOperatorNo}}</div>
          </div> -->
          <div class="passageway_content" v-if="aisleData.applyNo">
            <div class="passageway_content_left">申请单号：</div>
            <div class="passageway_content_right">{{aisleData.applyNo}}</div>
          </div>
          <div class="passageway_content">
            <div class="passageway_content_left">商户联系人：</div>
            <div class="passageway_content_right">{{aisleData.customerName}}</div>
          </div>
          <div class="passageway_content">
            <div class="passageway_content_left">联系方式：</div>
            <div class="passageway_content_right">{{aisleData.customerPhone}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.processLv">
            <div class="passageway_content_left">商户审核状态：</div>
            <div class="passageway_content_right">
              {{aisleData.processLvName}}
              <span style="padding-left:100px;" v-if="aisleData.processLv == '6'&&(aisleCode == 'A0000023'||aisleCode == 'A0000024')">
                <el-button class="btnClass" type="primary" size="mini" @click="openSige(aisleData.signContractUrl)" >合同签约验证码</el-button>
              </span>
            </div>
          </div>
          <div class="passageway_content" v-if="aisleData.rejectReason">
            <div class="passageway_content_left">商户审核备注：</div>
            <div class="passageway_content_right">{{aisleData.rejectReason}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.mercTerminalNo">
            <div class="passageway_content_left">商户终端号：</div>
            <div class="passageway_content_right">{{aisleData.mercTerminalNo}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.lng">
            <div class="passageway_content_left">经度：</div>
            <div class="passageway_content_right">{{aisleData.lng}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.lat">
            <div class="passageway_content_left">纬度：</div>
            <div class="passageway_content_right">{{aisleData.lat}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.activeStatusName&&(aisleCode == 'A0000036')">
            <div class="passageway_content_left">激活状态：</div>
            <div class="passageway_content_right">{{aisleData.activeStatusName}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.isAuthName">
            <div class="passageway_content_left">授权码：</div>
            <!-- <div class="passageway_content_right status-color-green">{{aisleData.isAuthName}}</div> -->
            <div :class="['passageway_content_right',aisleData.isAuthName=='未授权'?'status-color-red':'status-color-green']">{{aisleData.isAuthName}}</div>
          </div>
          <div class="passageway_content" v-if="aisleData.isAuthName !=='已授权' && aisleData.adminState != 6 && aisleData.qrCodeData">
            <div class="passageway_content_left">认证二维码：</div>
            <div class="passageway_content_right" v-if="activePay == '1'">
              <img :src="aisleData.qrCodeData" width="256" height="256" />
              <div class="qrcode-text">当前认证申请已通过审核</div>
              <div class="qrcode-text">请使用商户联系人的微信扫码完成授权</div>
            </div>
            <div class="passageway_content_right" v-else-if="activePay == '2'">
              <img :src="aisleData.qrCodeData" width="256" height="256" />
              <div class="qrcode-text">当前认证申请已通过审核</div>
              <div class="qrcode-text">请使用商户联系人的支付宝扫码完成授权</div>
            </div>
          </div>
          
          <div class="passageway_content justify-content-btn">
            <div class="haruyuki-mr-20" v-if="aisleData.adminState == '2' || aisleData.adminState == '4'">
              <el-button class="btnClass" type="success" style="margin-top: 20px;margin-bottom: 20px;" @click="revoke(aisleData.applyNo)">撤销申请</el-button>
            </div>
            <div class="haruyuki-mr-20" v-if="aisleData.adminState=='4'">
              <el-button class="btnClass" type="warning" @click.stop="submitAuthinfo">重新提交认证信息</el-button>
            </div>
            <div class="haruyuki-mr-20" v-if="activeIsAuth != 1 && activePay == '1'">
              <el-button class="btnClass" type="info" @click="signing()" :disabled="mBtn">重新发送签约短信 <span v-show="mBtn">{{count}}S</span></el-button>
            </div>
            <div class="haruyuki-mr-20" v-if="aisleData.merchantType == '2' && !aisleData.mercId">
              <el-button class="btnClass" type="warning" @click="dialogMercVisible = true">设置渠道商户号</el-button>
            </div>
            <div class="haruyuki-mr-20" v-if="aisleData.isApply == '1' && aisleData.merchantType == '1'">
              <el-button class="btnClass" type="primary" @click="dialogVisible = true">设置费率</el-button>
            </div>
            <div v-if="aisleData.isApply == '1' && aisleData.merchantType == '1'">
              <el-button class="btnClass" type="primary" @click="openMerchant">开通商户</el-button>
            </div>

          </div>
        </div>
        <!-- <div v-if="aisleKind !== 2">
          <div class="notOpen">
            该通道未开放
          </div>
        </div> -->
      </div>
    </div>
    <el-image-viewer
      style="z-index: 2048"
      v-if="contractQrCodeShow"
      :on-close="()=>{ contractQrCodeShow = false }"
      :url-list="[aisleData.contractQrCode]"
    ></el-image-viewer>
    <el-dialog
      title="设置费率"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      
      <template>
          <rate-form :data="[aisleData.rateVo]" :isTemplate="false" ref="toRateForm"/>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleRate"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="渠道商户"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogMercVisible"
      :before-close="handleMercClose"
    >
      <template>
        <merc-form :merc-form="mercForm" :aisleCode="aisleCode" ref="toMercForm"/>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleMerc"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <!-- 驳回信息修改 -->
    <!-- <el-dialog
      append-to-body
      :title="'修改认证信息'"
      :close-on-click-modal="false"
      :close-on-press-escape	="false"
      :visible.sync="wxInfoVisible"
      :before-close="wxInfoBeforeClose"
      v-if="wxInfoVisible"
      ref="wxInfoDialog"
      width="1200px"
    >
      <authenticationFailed ref="authenticationFailed" :rpiNo='rpiNo' />
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => { wxInfoVisible = false;}">取 消</el-button>
        <el-button type="primary" v-preventClick @click="wxInfoSubmit" >确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 合同签约验证码 -->
    <el-dialog
      append-to-body
      title="合同签约验证码"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="signVisible"
      :before-close="signBeforeClose"
      v-if="signVisible"
      ref="wxInfoDialog"
      width="375px"
    >
      <div>
        <el-input type="text" size="small" v-model="signObj.checkCode" placeholder="请输入合同签约验证码" ></el-input>
        <div style="padding-top:30px;display: flex;justify-content: center;">
          <el-button style="width: 80%;" size="small" type="primary" v-show="signVisibleBtn" @click="clickSign">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
// yinshengDetail
import {apiysSingn,apizySingn, queryBasicAisleListPlus, queryReal, getRevoke, getCancelAuthMessages, resendMsg, updateWXApplyData, applyStateQry, incomingFlow, singleChannel, updateMercId } from "@/api/rb-service/posinfo/pos_info_details";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import authenticationFailed from "../component/authenticationFailed/authenticationFailed";
import rateForm from "@/components/rb-merchant/rate-form";
import mercForm from "../component/merc_form";

export default {
  components: {
    ElImageViewer,
    rateForm,
    mercForm
  },
  data() {
    return {
      rpiNo: "",
      activeIndex: 0, //当前选中通道index
      activeIsAuth: null,
      aisleCode: null, //通道编号
      aisleName:"", //通道名称
      aisleKind:0, //2 展示,----不等于2 该通道未开放
      aisleList: [], //通道类型列表
      aisleData: {}, //通道详情
      activePay: '1', //当前选中支付公司index 1微信 2支付宝
      payName: '微信',
      payList: [ //支付公司类型列表
        {
          id: 1,
          name: "微信",
          image: "/img/merchant-icon/wechat.png",
          custType: '1',
          show: true,
        },
        {
          id: 2,
          name: "支付宝",
          image: "/img/merchant-icon/alipay.png",
          custType: '2',
          show: true,
        },
      ],
      loading: true,
      mBtn: false,
      count: 0,
      timer: null, //定时器
      contractQrCodeShow: false,
      dialogVisible: false,
      dialogMercVisible: false,
      mercForm: {
        mercId: '',
        appid: '',
        mercAppid: '',
        mercPrivate: '',
        mercPublic: '',
        mercKey: '',
        mercToken: '',
        mercTerminalNo: '',
        lng: '',
        lat: '',
      },
      // wxInfoVisible: false,//驳回弹框显示
      signVisible:false, // 合同签约验证码
      payActiveObj:{},
      signObj:{}, //签约合同短息弹框
      signVisibleBtn: true
    };
  },
  computed: {
    base64() {
      return (val) => {
        if(val){
          if (val.indexOf('data:image/png;base64,') > -1) {
            return ('data:image/png;base64,' + val );
          } else {
            return val;
          }
        }else{
          return ''
        }

      };
    },
  },
  watch: {
    aisleCode(code) {
      if (code == 'A0000014') {
        applyStateQry('5', this.rpiNo).then(() => {
        }).catch(()=>{
        })
      }
    }
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {
    openSige(url){
				if( url.indexOf("?") != -1 ){
					let urlSearch = url.split('?')[1];
					let searchArr = urlSearch.split('&');
					for (let i = 0; i < searchArr.length; i++) {
						let pari = searchArr[i].split("=");
						this.signObj[pari[0]] = pari[1]
					}
					this.signVisible = true;
				}else{
					this.signVisible = false;
          this.$message.error("参数错误，请稍等或切换通道!");
          
				}
    },
    clickSign(){
      let that = this;
				let reg = /^\d{6}$/;
				if(!reg.test(this.signObj.checkCode)){
          this.$message.error("验证码格式不正确!");
				}else{
					let param = {
						...this.signObj,
						rdmCode:this.signObj.rand
					}
					that.signVisibleBtn = false;
					/* 易生 type=1 */
					if(param.type=='1'){
						apiysSingn(param).then(res => {
							if (res.data.code == 200) {
								that.signObj.checkCode = "";
								that.realDown(res.data.data.contractUrl)
							} else {
                that.signVisibleBtn = true;
                that.$message.error(res.data.msg);
							}
						}).catch((err)=>{
              that.signVisibleBtn = true;
              that.$message.error(err.data.msg);
						});
					}
					/* 易生中原 type=2 */
					else if(param.type=='2'){
						apizySingn(param).then(res => {
							if (res.data.code == 200) {
								that.signObj.checkCode = "";
								that.realDown(res.data.data.contractUrl)
							} else {
                that.signVisibleBtn = true;
                that.$message.error(res.data.msg);
							}
						}).catch((err)=>{
              that.signVisibleBtn = true;
              that.$message.error(err.data.msg);
						});
					}
				}
    },
    realDown(fileurl){
				this.signVisible = false;
        // window.location.href = fileurl; 
        window.open(fileurl)
    },
    /* 修改认证信息 提交 */
    signBeforeClose(done){
      // this.signVisible = false;
      done();
    },
    
    /* 修改认证信息 提交 */
    submitAuthinfo() {
      const _this = this;
      _this.loading = true;
      let params = {
        aisleCode: _this.aisleCode,
        rpiNo: _this.rpiNo,
        payWay: _this.activePay
      }
      updateWXApplyData(params).then((res) => {
        _this.aisleData = res.data.data;
        _this.loading = false;
        _this.$message.success("操作成功!");
      },(error) => {
        window.console.log(error);
        _this.loading = true;
      }).catch(() =>{
        _this.loading = true;
      })
    },
    // // 修改认证信息提交
    // wxInfoSubmit(){
    //   let param = this.$refs['authenticationFailed'].wxApplyDat;
    //   param.rpiNo = this.rpiNo;
    //   param.payWay = this.activePay;
    //   let that = this;

    //   this.$refs['authenticationFailed'].$refs['wxApplyDat'].validate((valid) => {
    //     if(valid){
    //       that.wxInfoVisible=true;
    //       updateWXApplyData(param).then(() => {
    //         that.$message.success("操作成功!");
    //         that.wxInfoVisible = false;
    //       },
    //        (error) => {
    //         window.console.log(error);
    //       }).catch(() =>{
    //         that.wxInfoVisible=false;
    //       })
    //     }
    //   })
    // },
    // /* 驳回信息弹框驳回前回调 */
    // wxInfoBeforeClose(done) {
    //   // this.$refs['authenticationFailed'].initEmpty();
    //   done();
    // },
    /* 重新签约 */
    signing(){
      // 发送验证码 API
      resendMsg({aisleKind: this.aisleKind,rpiNo: this.rpiNo}).then(() => {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
        
        this.getQueryReal(this.payActiveObj);
      }, error => {
        window.console.log(error);
        // this.mBtn = false;
        // clearInterval(this.timer);
        // this.timer = null;
      })
      // 发送验证码倒计时
      if (!this.timer) {
        this.count = 60;
        this.mBtn = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.mBtn = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    /* 撤销申请 */
    revoke(applyNo){
      if (this.activePay == '1') {
        getRevoke(applyNo, this.aisleCode).then(() => {
          this.$message({
            message: '撤销申请操作成功',
            type: 'success'
          });
        })
      } else if (this.activePay == '2') {
        getCancelAuthMessages(applyNo, this.aisleCode).then(() => {
          this.$message({
            message: '撤销申请操作成功',
            type: 'success'
          });
        })
      }
      
    },
    /* 设置费率 */
    handleRate() {
      singleChannel({rpiNo: this.rpiNo, rateVo: this.aisleData.rateVo}).then((res) => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        let params = {
          rpiNo: this.rpiNo,
          aisleCode: this.aisleCode,
          custType: this.activePay
        }
        this.getQueryReal(params);
        this.dialogVisible = false;
      }).catch(()=>{
        this.dialogVisible = false;
      })
    },
    /* 关闭dialog */
    handleClose(done) {
      done();
    },
    /* 更新渠道商户号 */
    handleMerc() {
      this.$refs.toMercForm.$refs.mercForm.validate((valid) => { 
        if (valid) {
          updateMercId(this.mercForm).then((res) => {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            let params = {
              rpiNo: this.rpiNo,
              aisleCode: this.aisleCode,
              custType: this.activePay
            }
            this.getQueryReal(params);
            this.dialogMercVisible = false;
            this.$refs["toMercForm"].$refs["mercForm"].resetFields();
          }).catch(()=>{
            this.dialogMercVisible = false;
          })
        } else {
          return false;
         }
      })
    },
    /* 关闭 渠道商户号 dialog */
    handleMercClose(done) {
      this.$refs["toMercForm"].$refs["mercForm"].resetFields();
      done();
    },
    /* 开通商户 */
    openMerchant() {
      // this.$message({
      //   message: '敬请期待！',
      //   type: 'none'
      // });
      this.$confirm('确定要开通商户吗').then(() => {
        incomingFlow(this.rpiNo, this.aisleCode).then((res) => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          let params = {
            rpiNo: this.rpiNo,
            aisleCode: this.aisleCode,
            custType: this.activePay
          }
          this.getQueryReal(params);
        }).catch(()=>{
        })
      });
      
    },
    /* 切换通道 */
    clickActive(index){
      const _this = this;
      _this.loading = true;
      _this.activeIndex = index;
      _this.activePay = '1'; //切换通道类型 默认子支付公司状态为0(微信)

      _this.aisleKind = _this.aisleList[index].aisleKind;
      _this.aisleCode = _this.aisleList[index].aisleCode;
      _this.aisleName = _this.aisleList[index].aisleName;
      _this.activeIsAuth = _this.aisleList[index].isAuth;
      let params = {
        rpiNo: _this.rpiNo,
        aisleCode: _this.aisleList[index].aisleCode,
        custType: _this.activePay
      }

      _this.mercForm = {
        rpiNo: _this.rpiNo,
        aisleCode: _this.aisleList[index].aisleCode,
        mercId:  "",
      }

      _this.payActiveObj = params;
      _this.getQueryReal(params);
    },
    /* 切换支付公司 根据通道切换 */
    clickPayActive(row, aisleIndex) {
      const _this = this;
      _this.loading = true;
      _this.payName = row.name;
      if (_this.activeIndex === aisleIndex) {
        _this.activePay = row.custType;
        let params = {
          rpiNo: _this.rpiNo,
          aisleCode: _this.aisleList[aisleIndex].aisleCode,
          custType: _this.activePay
        }
        _this.payActiveObj = params;
        _this.getQueryReal(params);
      }
    },
    /* 获取实名信息 */
    getQueryReal(params = {}) {
      const _this = this;
      queryReal(params).then((res) => {
        _this.aisleData = res.data.data;
        console.log('获取实名信息',_this.aisleData)
        if (_this.aisleData.rateVo) {
          this.$set(_this.aisleData.rateVo, "isShow", true);
          if (_this.aisleData.rateVo.codeScanningRate == "") {
            _this.aisleData.rateVo.codeScanningRate = _this.aisleData.rateVo.codeScanningRatePlus;
          }
          if (_this.aisleData.rateVo.codeAdvanceRate == "") {
            _this.aisleData.rateVo.codeAdvanceRate = _this.aisleData.rateVo.codeAdvanceRatePlus;
          }
        }
        _this.loading = false;
      }).catch(()=>{
        _this.loading = true;
      })
    },
    /* 页面加载 初始化请求 微信认证通道列表 接口 */
    infoData() {
      this.rpiNo = this.$route.query.rpiNo;
      const _this = this;
      queryBasicAisleListPlus(this.rpiNo).then((res) => {
        _this.aisleList = res.data.data;
        for (let i = 0; i < _this.aisleList.length; i++) {
          _this.$set(_this.aisleList[i], "payList", _this.payList);
        }
        _this.aisleName = _this.aisleList[0].aisleName;
        _this.aisleCode = _this.aisleList[0].aisleCode;
        _this.clickActive(0);
        // _this.mercForm = {
        //   rpiNo: _this.rpiNo,
        //   aisleCode: _this.aisleCode,
        //   mercId:  "",
        // }
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    }
  },
};
</script>

<style lang="scss" scoped>
.font-size-16 {
  font-size: 16px;
}

.aisle-box-type {
  width: 268px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 102, 255, .08);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .05);
  cursor: pointer;
  &:nth-child(n+2) {
    margin-left: 14px;
  }
  .aisle-type-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    .aisle-type-logo {
      width: 50px;
      height: 50px;
      margin-right: 14px;
      border-radius: 50px;
    }
    .aisle-type-right {
      display: flex;
      // align-items: center;
      flex-wrap: wrap;
      flex-direction: column;
      .aisle-type-title {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
}

.pay-type-item {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111111;
  font-size: 12px;
  padding: 0px 10px;
  border-radius: 4px;
  line-height: 24px;
  .pay-type-logo {
    width: 20px;
    height: 20px;
  }
}
.pay-active {
  // background: #0256FF;
  // border: 2px solid #0256FF;
  background: rgba(2,86,255,.5);
  color: #FFFFFF;
}

.activity-solid {
  padding: 15px;
  border-bottom: 2px solid #E4E7ED;
}
.passageway_content {
  // display: flex;
  display: -webkit-box;
  // border-bottom: 1px solid #e5e5e5;
  border-bottom: 1px solid #E4E7ED;
  font-size: 14px;
  .passageway_content_left {
    padding: 15px 0 15px 15px;
    background: #F8F9FD;
    width: 310px;
    text-align: right;
  }
  .passageway_content_right {
    padding: 15px 15px 15px 8px;
  }
}
.passageway_content:last-child {
  border-bottom: none;
  .btnClass{
    margin-top: 20px;
  }
}
.status-color-green {
  color: #0ac061;
}
.status-color-red{
  color: #FE3F10;
}
.active{
  // background: #F8F9FD;
  // background: rgba(0, 102, 255, .08);
  // background: #0256FF;
  background: rgba(2, 86, 255, .1);
}
.notOpen{
  line-height: 300px;
  text-align: center;
}
.justify-content-btn{
  display: flex;
  justify-content: center
}
.qrcode-text {
  color: #16222a;
  font-size: 16px;
  font-weight: 400;
}
</style>